<template>
  <div class="app-container">

		<div class="filter-container">
			<el-input  style="width: 200px;"   v-model="query.name" placeholder="姓名" class="filter-item"  ></el-input>
			<el-input  style="width: 200px;"   v-model="query.phone" placeholder="电话" class="filter-item"  ></el-input>
      <el-select filterable v-model="query.rent_unit_id" class="filter-item"  placeholder="租借单位">
        <el-option v-for="item in unitList" :key="item.id" :value="item.id" :label="item.unit_name" ></el-option>
      </el-select>

			<!--


			 <el-date-picker class="filter-item"
        v-model="query.startDate"
        type="date"
        placeholder=""
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>

      <el-date-picker class="filter-item"
        v-model="query.createdAt" value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="录入开始日期"
        end-placeholder="录入结束日期">
      </el-date-picker>
			-->

			<el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
			<el-button @click="openAddUser" type="primary" class="filter-item">添加</el-button>
<!--      <el-button @click="download" type="primary" class="filter-item">导出</el-button>-->

<!--      <div class="filter-item">
        <el-upload
          style="margin-left: 10px"
          :action="host+'/guard/importFile?importType=user&token='+token"
          accept=".xls,.xlsx"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :on-progress="uploadProcess"
          :show-file-list="false">
          <el-button type="primary">导入</el-button>
        </el-upload>
      </div>-->

      <el-button style="margin-left: 10px" @click="getRecords" type="danger" class="filter-item">刷新</el-button>
		</div>

		<el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row v-horizontal-scroll="'always'">
			<!-- <el-table-column type="selection" width="55" /> -->
			<!-- <el-table-column type="index" label="序列" width="50" /> -->
			<el-table-column fixed="left" prop="id" label="ID" min-width="50" />
<!--			<el-table-column prop="avatar" label="头像" min-width="80" >
					<template slot-scope="scope">
						<img v-if="scope.row.avatar" class="table-img" :src="host+scope.row.avatar">
					</template>
			</el-table-column>-->
			<el-table-column prop="name" label="姓名" min-width="100" />
			<el-table-column prop="phone" label="电话" min-width="120" />
			<el-table-column prop="password" label="密码" min-width="120" />
<!--			<el-table-column prop="gender" label="性别" min-width="80" >
				<template slot-scope="scope">
						<el-tag v-if="scope.row.gender==1">男</el-tag>
						<el-tag v-else type="danger">女</el-tag>
				</template>
			</el-table-column>-->
			<el-table-column prop="get_rent_unit.unit_name" label="所属单位" min-width="150" />
			<el-table-column show-overflow-tooltip prop="beizhu" label="备注" min-width="300" />
			<el-table-column prop="created_at" label="创建时间" min-width="160" />
<!--			<el-table-column prop="status" label="启用/禁用" min-width="100" >
				<template slot-scope="scope">
						<el-switch	v-model="scope.row.status"	active-color="#409EFF"	inactive-color="#909399"
							:active-value="1"	:inactive-value="2"		@change="changeStatus(scope.row)">
						</el-switch>
				</template>
		</el-table-column>-->
			<el-table-column fixed="right" label="操作" min-width="100">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog :title="isAdd?'添加用户':'编辑用户'" :visible.sync="addDialogFormVisible" >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="租借单位" :label-width="formLabelWidth">
          <el-select filterable v-model="form.rent_unit_id" placeholder="所属单位">
            <el-option v-for="item in unitList" :key="item.id" :value="item.id" :label="item.unit_name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="form.beizhu" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeBackDialog">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

import { myGet,myPost,exportXls } from '@/utils/myUtils'
import {getToken} from "@/utils/auth";

const urlUserLst = '/guard/user/lst';
const urlAddUser = '/guard/user/add';
const urlGetUser = '/guard/user/detail';
const urlDeleteUser = '/guard/user/del';
const urlDownloadUser = '/guard/download';
const urlUnitNameLst = '/guard/rentunit/lst?all=1'

export default {

    data() {
        return {
          token:"",
					host:process.env.VUE_APP_HOST,
					isAdd:true,
					addDialogFormVisible:false,
          unitList:[],
          formLabelWidth: '120px',
          form: {
            id: 0,
            name: '',
            phone: '',
            password: 'cf123456',
            rent_unit_id: '',
            beizhu: ''
          },
					query:{
            rent_unit_id:'',
						name:'',
						phone:'',
					},
					pagination:{
						total:0,
						page:1,
						pageSize:20,
					},
					list: [],

					listLoading: false
        }
    },
    methods: {
      handleEdit(index, row) {
        const id = row.id
        this.isAdd = false
        this.addDialogFormVisible = true
        Object.assign(this.$data.form,this.$options.data().form)
        myGet(urlGetUser,{id}).then(res=>{
          if(res.status){
            let user = res.data.records
            this.form.id = user.id
            this.form.name = user.name
            this.form.phone = user.phone
            this.form.password = user.password
            this.form.beizhu = user.beizhu
            this.form.rent_unit_id = user.rent_unit_id
          }
        })

      },
      handleDelete(index, row) {
        this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = row.id
          myGet(urlDeleteUser, { id }).then(res => {
            if (res.status) {
              this.$message.success(res.msg);
              this.reload();
            }
          })
        })
      },
      onSubmit(formName) {
        myPost(urlAddUser,this.form).then(res=>{
          if(res.status){
            this.$message.success(res.msg);
            this.addDialogFormVisible = false
            this.getRecords()
          }
        })
      },
      openAddUser(){
        Object.assign(this.$data.form,this.$options.data().form)
        this.addDialogFormVisible = true
      },
      closeBackDialog(){
        this.addDialogFormVisible= false
        Object.assign(this.$data.form,this.$options.data().form)
      },

      getAllUnitName(){
        myGet(urlUnitNameLst).then(res=>{
          if(res.status){
            this.unitList = []
            res.data.records.forEach(unit=>{
              this.unitList.push({
                'id':unit.id,
                'unit_name':unit.unit_name
              })
            })
          }
        })
      },

      uploadSuccess(res, file, fileList){
        if(res.status){
           this.$message.success(res.msg)
           this.getRecords();
        }else{
          this.$message.error(res.msg)
        }
      },
      uploadError(err, file, fileList){
        //console.log(err)
      },
      uploadProcess(event, file, fileList){
        //console.log(event)
      },

      download(){
        const url = this.host+urlDownloadUser+"?downloadType=user"
        exportXls(url);
      },

      reload(){
        Object.assign(this.$data.query,this.$options.data().query)
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },
			getRecords(){
        this.listLoading = true;
        let params = Object.assign(this.query,this.pagination)
					myGet(urlUserLst,params).then((res) =>{
            this.listLoading = false;
            if(res.status){
              this.list = res.data.records
              this.pagination.total = res.data.total
            }
          })
			},
			changeStatus(row){
        myPost(urlAddUser,{id:row.id, status:row.status}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
          }
        })
			},


			handleSizeChange(val) {
					this.pagination.pageSize = val
					this.pagination.page = 1
					this.getRecords()
			},
			handleCurrentChange(val) {
					this.pagination.page = val
					this.getRecords();
			},
			//多选
			toggleSelection(rows) {
					if (rows) {
					rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
					});
					} else {
							this.$refs.multipleTable.clearSelection();
					}
			}
    },
    mounted() {
      this.getRecords()
      this.getAllUnitName()
      this.token = getToken()

      //console.log(this.host)
    }
}
</script>

<style>

.table-img{
    width: 50px;
    height: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>


